<template>
  <div style="width: 951px;margin:20px auto;border: 1px solid #95db58 ;padding:10px 20px 0; ">


    <!--主体内容第一部分开始-->
    <div class="jindck">
      <i class="el-icon-back" @click="$router.push('/homePage')"></i>
      <div class="jindck-meun">[多重优惠+超值赠送]品质全景，张家界、凤凰、天门山、宝峰湖纯玩双飞5日游<img src="../assets/img/tjcp.jpg" width="40" height="40" />
        <img src="../assets/img/fk.jpg" width="40" height="40" /></div>
      <div class="jin2">
        <div class="jin2-left">
          <ul>
            <li>
              <a href="" title="">
                <img src="../assets/img/fhgc.jpg" width="400" height="250" />
              </a>
            </li>
            <li class="pics"><a href="images/jdckb1.jpg" class="zoom" title="凤凰古城" ><img src="../assets/img/jdcks1.jpg" width="100" height="63" /></a></li>
            <li class="pics"><a href="images/jdckb2.jpg" class="zoom" title="凤凰古城"><img src="../assets/img/jdckb2.jpg" width="100" height="63" /></a></li>
            <li class="pics"><a href="images/jdckb3.jpg" class="zoom" title="凤凰古城"><img src="../assets/img/jdckb3.jpg" width="100" height="63" /></a></li>
          </ul>
        </div>
        <div class="jin2-right">
          <ul>
            <li>途乐行价：<span class="colorc">￥2988</span></li>
            <li>团购价：<strong>￥2888</strong> 起</li>
            <li>最大优惠：￥100</li>
            <li>出游天数：5天</li>
            <li>出游人数：已有<span>{{this.num}}</span>人出游此线路</li>
            <li>提前报名：建议提前一天报名</li>
            <li>
              <el-button type="success" @click="addNum">添加至购物车</el-button>
              <el-button type="success" @click="jiesuan">立即购买</el-button>
            </li>
          </ul>
        </div>
      </div>
      <div class="tuijian">
        <div class="tuijian-m">推荐理由</div>
        <div class="tuijian-inf">
          <ul>
            <li>含3早6正，早餐6元/人/餐，正餐15元/人/餐（十人一桌、四荤四素、八菜一汤、不含酒水）</li>
            <li>标准等当地非星级酒店，参考酒店，长沙：万怡商务酒店、广圣风景酒店、佳居酒店；武陵源：永辉、福立德；凤凰 ：星期八酒店、慢走商务 (2-3人间，独立卫生间、彩电、定时热水19:00—23:00、定时空调，无一次性用品)。</li>
            <li>轻松休闲之旅，漫步古城，体会千年文化。</li>
          </ul>
        </div>
        <div class="tuijian-t">特别优惠</div>
        <div class="tuijian-inf">
          <ul>
            <li>凤凰古城是国家历史文化名城，曾被新西兰著名作家路易艾黎称赞为中国最美丽的小城。</li>
            <li>热热闹闹的土家风情园，感受当地独特的人文底蕴。</li>
            <li>武昌/长沙往返空调火车硬座，当地空调旅游车（保证一人一座）</li>
          </ul>
        </div>
      </div>
      <div class="tuijian">
        <div class="tuijian-m">景点简介</div>
        <div class="tuijian-inf">
          <ul>
            <li> 张家界土家风情园坐落在风景明珠张家界市境内。交通十分便利，距机场、火车站仅十分钟车程。园区占地80余亩,总投资7500万元，是一座人文景观与自然景观相融合，集旅游观光、文艺表演、奇珍展览、住宿、餐饮、娱乐、购物等于一体的大型综合性旅游服务企业。土家风情园主要由土家建筑群落、民风民俗展示、文艺演出、客房、餐饮、大型狩猎场、珍稀植物园、根雕基地等功能区构成。 园内建筑多为木石结构，雕梁画栋，金碧辉煌，飞檐翘角，玲珑雅致。代表作有土司城堡、摆手堂、土家山寨、垕王宫等。特别是冲天楼，依山造阁，气势恢宏，楼高48米，九重十二层，曲径回复，独具匠心。祭祖活动、土家历史文物展示、土家民俗演示，园内的建筑多为木石结构，雕梁画栋、金壁辉煌、飞檐翘角、玲珑雅致，代表作有土司城堡、摆手堂、土家山寨、垕王宫等。特别是冲天楼，依山造阁，气势恢宏，楼高48米，九重十二层，曲径回复，独具匠心，曾荣获&ldquo;九重天&rdquo;&ldquo;千人毛古斯&rdquo;两项世界吉尼斯之最，土家园林艺术等丰富多彩 </li>
          </ul>
        </div>

      </div>
      <div class="tuijian">
        <div class="tuijian-m">温馨提示</div>
        <div class="tuijian-inf">
          <ul>
            <li> 按2人入住1间房核算，如出现单男单女，尽量安排该客人与其他同性别团友拼房；如不愿拼房或未能拼房，请补齐单房差以享用单人房间。 </li>
            <li> 当地购物时请慎重考虑，把握好质量与价格，务必索要发票。 </li>
            <li> 出团通知最晚于出团前1天发送，若能提前确定，我们将会第一时间通知您。 </li>
            <li> 出游过程中，如产生退费情况，以退费项目旅行社折扣价为依据，均不以挂牌价为准。 </li>
            <li> 如遇国家政策性调整门票、交通价格等，按调整后的实际价格结算。 </li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "commodityPage",
  data(){
    return{
      carList:{},
      num:0,
      car:{},
      token:localStorage.getItem("TOKEN"),
      order:{}
    }
  },
  created(){
    this.getNum();
    this.$axios.get("/api/customer/jie").then(res =>{
      this.order= res.data
      // console.log(res.data[0].num)
    })
  },
  methods:{
    addNum:function (){
      if (this.token !== null){
        this.num++;
        this.$axios.put("/api/customer/num/"+this.num).then(res =>{
          console.log(res)
        })
        this.$axios.post("/api/customer/addCar/"+this.token).then(res =>{
          console.log(res)
        })
      }else{
        this.$confirm('请先登录', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push('/login')
        }).catch(() => {
        });
      }
    },
    getNum:function (){
      this.$axios.get("/api/customer/num").then(res =>{
        this.num= res.data[0].num
        // console.log(res.data[0].num)
      })
    },
    jiesuan:function (){
      if (this.token !== null){
        console.log(this.order)
       this.$router.push({path:'/addOrder' ,query:{info:this.order}})
      }else{
        this.$confirm('请先登录', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push('/login')
        }).catch(() => {
        });
      }
    }

  }
}
</script>

<style scoped>
*{
  list-style: none;
  text-align: left;
}
.jindck-meun{
  color: #51ad24;
  font-size: 23px;
  font-weight: 700;

}
.jin2{
  margin-top: 20px;
  position: relative;
}
.jin2-left{
display: inline-block;
  margin-right: 30px;
 }
.jin2-right{
display: inline-block;
  line-height: 40px;
  position: absolute;
  top: 0px;
 }
.pics{
  display: inline-block;
  border: 1px solid #FC0;
  margin:  10px;
  height: 63px;
}
.colorc ,.jin2-right li span{
  color: #F60;
}
.jin2-right li strong{
  color: #F60;
  font-size: 27px;
}
.tuijian {
  border: 1px #fde1bc solid;
  margin: 20px 0px;

}
.tuijian-m ,.tuijian-t{
  background-color: #fff5da;
  padding-left: 10px;
  line-height: 25px;
  color: #9a6610;
  font-size: 13px;
  font-weight: bold;
}
.tuijian-t{
color: #cc0000;
}
.tuijian-inf li{
  background: url("../assets/img/d.jpg") 10px 10px no-repeat;
  padding-left: 25px;
  font-size: 12px;
  line-height: 30px;
}
.el-icon-back{
  font-size: 19px;
}
</style>